<template>
  <div>
    Message
    <ul>
      <li v-for="message in messages" :key="message.id">
        <!-- <router-link :to="'/home/message/detail/' + message.id">{{
          message.title
        }}</router-link> -->
        <!-- <router-link
          :to="`/home/message/detail/${message.id}?name=jack&age=18`"
          >{{ message.title }}</router-link
        > -->

        <router-link
          :to="{
            name: 'Detail',
            params: {
              // 属性名称要和配置项:id一致
              id: message.id,
            },
            query: {
              name: 'jack',
              age: 18,
            },
          }"
          >{{ message.title }}</router-link
        >
        <button @click="push(message.id)">push</button>
        <button @click="replace(message.id)">replace</button>
      </li>
    </ul>
    <button @click="back">back</button>
    <button @click="forward">forward</button>
    <router-view />
  </div>
</template>

<script>
export default {
  name: "Message",
  data() {
    return {
      messages: [],
    };
  },
  methods: {
    push(id) {
      // 编程式导航
      // this.$router.history.push(`/home/message/detail/${id}?name=jack&age=18`);
      this.$router.history.push({
        name: "Detail",
        params: {
          // 属性名称要和配置项:id一致
          id,
        },
        query: {
          name: "jack",
          age: 18,
        },
      });
    },
    replace(id) {
      this.$router.history.replace(`/home/message/detail/${id}`);
    },
    back() {
      this.$router.history.go(-1);
    },
    forward() {
      this.$router.history.go(1);
    },
  },
  mounted() {
    setTimeout(() => {
      this.messages = [
        { id: 1, title: "message001" },
        { id: 3, title: "message003" },
        { id: 5, title: "message005" },
      ];
    }, 1000);
  },
};
</script>

<style>
</style>